import React, { Component, PropTypes } from 'react';
import {
  View,
  Text,
  ScrollView,
  Platform,
  StyleSheet,
} from 'react-native';

import PxToDp from '../../utils/PxToDp';
import NavCon from '../Public/NavCon';
import fetchPerfence from '../../actions/PerfenceAction';
import Loading from '../Public/Loading';

const perfenceIsLoading = true;

export default class MyPerformance extends Component {
  static propTypes = {
    dispatch: PropTypes.func,
  };

  _onDateChange(date) {
    this.setState({ date });
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch(fetchPerfence(perfenceIsLoading, 0, '', '', '', 1));
  }

  render() {
    const perfenceData = this.props.perfenceData;
    let receive = '';
    let online = '';
    let driver = '';
    const store = 0;
    let receiveRate = '';
    let onlineRate = '';
    let driverRate = '';
    const storeRate = 0;
    if (perfenceData) {
      receive = perfenceData.answers;
      online = perfenceData.bills;
      driver = perfenceData.testdrives;
      receiveRate = perfenceData.answers_turn_rate;
      onlineRate = perfenceData.bills_turn_rate;
      driverRate = perfenceData.testdrives_turn_rate;
    }

    return (
      <View style={[styles.flex, styles.bgColor, styles.titleTop]}>
        <View style={styles.header}>
          <NavCon backName="" currentTitle="我的业绩" onPress={() => this.props.navigator.pop()} />
        </View>
        <View style={[styles.flex, styles.main]}>
          { this.props.perfenceIsLoading
            ?
              <Loading />
            :
              <ScrollView>
                <View style={[styles.section]}>
                  <View style={[styles.row, styles.list]}>
                    <Text style={[styles.title]}>接待人数</Text>
                    <View style={[styles.border, { borderColor: '#11c477' }]}>
                      <Text style={[styles.value]}>{receive}</Text>
                    </View>
                  </View>
                  <View style={[styles.row, styles.list]}>
                    <Text style={[styles.title]}>接待人数转化意向客户占比</Text>
                    <View style={[styles.border, { borderColor: '#11c477' }]}>
                      <Text style={[styles.value]}>{receiveRate}%</Text>
                    </View>
                  </View>
                </View>
                <View style={[styles.section]}>
                  <View style={[styles.row, styles.list]}>
                    <Text style={[styles.title]}>在线下单人数</Text>
                    <View style={[styles.border, { borderColor: '#11c477' }]}>
                      <Text style={[styles.value]}>{online}</Text>
                    </View>
                  </View>
                  <View style={[styles.row, styles.list]}>
                    <Text style={[styles.title]}>在线下单人数转化高度意向占比</Text>
                    <View style={[styles.border, { borderColor: '#11c477' }]}>
                      <Text style={[styles.value]}>{onlineRate}%</Text>
                    </View>
                  </View>
                </View>
                <View style={[styles.section]}>
                  <View style={[styles.row, styles.list]}>
                    <Text style={[styles.title]}>预约试驾人数</Text>
                    <View style={[styles.border, { borderColor: '#11c477' }]}>
                      <Text style={[styles.value]}>{driver}</Text>
                    </View>
                  </View>
                  <View style={[styles.row, styles.list]}>
                    <Text style={[styles.title]}>预约试驾人数转化到店占比</Text>
                    <View style={[styles.border, { borderColor: '#11c477' }]}>
                      <Text style={[styles.value]}>{driverRate}%</Text>
                    </View>
                  </View>
                </View>
                <View style={[styles.section]}>
                  <View style={[styles.row, styles.list]}>
                    <Text style={[styles.title]}>实际到店人数</Text>
                    <View style={[styles.border, { borderColor: '#11c477' }]}>
                      <Text style={[styles.value]}>{store}</Text>
                    </View>
                  </View>
                  <View style={[styles.row, styles.list]}>
                    <Text style={[styles.title]}>实际到店人数转化成交客户占比</Text>
                    <View style={[styles.border, { borderColor: '#11c477' }]}>
                      <Text style={[styles.value]}>{storeRate}%</Text>
                    </View>
                  </View>
                </View>
              </ScrollView>
          }

        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  bgColor: {
    backgroundColor: '#f7f8fa',
  },
  header: {
    height: PxToDp(44),
    backgroundColor: '#fff',
  },
  main: {
    paddingTop: PxToDp(20),
    paddingLeft: PxToDp(10),
    paddingRight: PxToDp(10),
  },
  section: {
    justifyContent: 'space-between',
    marginTop: PxToDp(10),
    paddingTop: PxToDp(20),
    paddingBottom: PxToDp(20),
    paddingLeft: PxToDp(20),
    paddingRight: PxToDp(20),
    width: PxToDp(355),
    height: PxToDp(98),
    backgroundColor: '#fff',
  },
  list: {
    width: '100%',
  },
  title: {
    width: PxToDp(230),
    color: '#666',
    fontSize: PxToDp(16),
  },
  border: {
    marginLeft: PxToDp(24),
    paddingLeft: PxToDp(20),
    borderLeftWidth: PxToDp(1),
  },
  value: {
    color: '#333',
    fontSize: PxToDp(20),
  },
  titleTop: {
    marginTop: Platform.OS === 'ios' ? PxToDp(20) : 0,
  },
});
